import React, { useState, useEffect } from "react";
import { useParams, useRouteMatch, useLocation } from "react-router-dom";

const Detail = () => {
    const match = useRouteMatch();
    const location = useLocation();
    console.log(match);
    const { id } = useParams();
    console.log(id);
    const [topic, setTopic] = useState([]);
    useEffect(() => {
        fetch("https://cnodejs.org/api/v1/topic/" + id)
            .then((res) => res.json())
            .then((res) => {
                console.log(res.data);
                res && setTopic(res.data);
            })
            .catch((err) => {
                console.log(err);
            });
    }, [id]);
    return (
        <div>
            <div>
                登录名：{topic.author?.loginname}
                <img src={topic.author?.avatar_url} alt="" />
                {/* 登录名：{topic.author && topic.author.loginname}
                <img src={topic.author && topic.author.avatar_url} alt="" /> */}
            </div>
            <div dangerouslySetInnerHTML={{ __html: topic.content }}></div>
            {/* 将topic.content当成innerHTML来赋值 */}
        </div>
    );
};

export default Detail;
